<template>
  <div class="main-app">
    <div :data="findList">
      <div class="content">
        <div class="info-list mainBack">
          <ul>
            <li>
              <label>交易时间</label>
              <p class="col-1 txt-align-r">
                {{ findList.orderDate }} {{ findList.orderTime }}
              </p>
            </li>
            <li>
              <label>交易流水</label>
              <p class="col-1 txt-align-r">{{ findList.txNo }}</p>
            </li>
            <li>
              <label>金额</label>
              <p class="col-1 txt-align-r txt-red">
                {{ findList.orderAmt }}
              </p>
            </li>
            <li>
              <label>订单编号</label>
              <p class="col-1 txt-align-r">{{ findList.orderNo }}</p>
            </li>
          </ul>
        </div>
        <div class="mainBack margin-t">
          <div class="demo-block flex-justify-align padding-all">
            <label>开票记录：</label>
            <p class="txt-info txt-align-r col-1 margin-r" @click="historyList()">
              查看
            </p>
            <i class="mint-cell-allow-right"> > </i>
          </div>
          <div
            class="invoice-item"
            v-for="(item, index) in findList.orderGoods"
            :key="index"
          >
            <div class="product">
              <div class="col-1">
                <p class="txt-weight">{{ item.goodsNm }}</p>
                <p class="txt-highlight">
                  <span class="invoice-sign">{{ item.goodsNo }}</span>
                </p>
              </div>
              <div class="col-30 txt-align-r">
                <h3 class="txt-weight txt-red">
                  <span class="txt-tips">￥</span>{{ item.goodsAmt }}
                </h3>
                <p>x{{ item.buyNum }}</p>
              </div>
            </div>
            <div class="line"></div>
            <div class="invoice-item-bot padding-t border-t flex-justify-align">
              <div>开票数量(已开票{{ item.useNum }})</div>
              <div>
                <span class="card-span" @click="jian(index)">－</span>
                <span>{{ fapiaoNo[index] }}</span>
                <span class="card-span" @click="jia(index)">＋</span>
              </div>
            </div>
          </div>
        </div>
        <div class="invoice-cont margin-t mainBack">
          <div class="invoice-list padding-t"></div>
          <div class="invoice-total txt-align-r">
            <span>本次开票金额</span>
            <span class="txt-red txt-tips txt-weight">￥</span>
            <span class="txt-red txt-h3 txt-weight">{{ kaipiaoMy }}</span>
          </div>
        </div>
        <div class="info-list mainBack margin-t invoice-type">
          <ul>
            <li>
              <label>开票类型</label>
              <div class="mint-radiolist col-1 flex-end mtmine-radio">
                <input
                  id="qiY"
                  type="radio"
                  class="kaipiao"
                  value="企业"
                  v-model="kaipiao"
                />
                <label for="qiY">企业</label>
                <input
                  id="people"
                  type="radio"
                  class="kaipiao"
                  value="个人"
                  v-model="kaipiao"
                  @click="res()"
                />
                <label for="people">个人</label>
              </div>
            </li>
            <li>
              <label>发票类型</label>
              <div class="mint-radiolist col-1 flex-end mtmine-radio">
                <input
                  id="sdpp"
                  type="radio"
                  class="kaipiao"
                  value="0"
                  v-model="fapiaotype"
                  checked
                />
                <label for="sdpp">数电普票</label>
              </div>
            </li>
            <li>
              <label for="custName">开票抬头</label>
              <input
                id="custName"
                type="text"
                placeholder="请输入开票抬头(必填项)"
                maxlength="200"
                class="col-1 txt-align-r"
                v-model="findList.custName"
                @blur="trimValue('custName')"
              />
            </li>
            <li v-show="geren">
              <label for="socialCodes">纳税人识别号</label>
              <input
                ref="socialCode"
                id="socialCodes"
                type="text"
                placeholder="请输入入识别号(必填项)"
                maxlength="20"
                class="col-1 txt-align-r"
                v-model="findList.socialCode"
                @blur="trimSocialCode"
              />
            </li>
          </ul>
          <div
            class="border-tb margin-lr flex-center"
            style="padding: 0.25rem 0px;"
          >
            <p @click="showF()">{{ tianxie }}</p>
          </div>
          <ul v-show="feibitian">
            <li v-show="kaipiao === '个人'">
              <label for="socialCode">纳税人识别号</label>
              <input
                id="socialCode"
                type="text"
                placeholder="选填"
                maxlength="20"
                class="col-1 txt-align-r"
                v-model="findList.socialCode"
              />
            </li>
            <li>
              <label for="address">地址</label>
              <input
                id="address"
                type="text"
                placeholder="选填"
                maxlength="200"
                class="col-1 txt-align-r"
                v-model="findList.address"
                @blur="trimValue('address')"
              />
            </li>
            <li>
              <label for="telephone">电话</label>
              <input
                id="telephone"
                type="text"
                placeholder="选填"
                maxlength="20"
                class="col-1 txt-align-r"
                v-model="findList.telephone"
              />
            </li>
            <li>
              <label for="accountnum">账号</label>
              <input
                id="accountnum"
                type="text"
                placeholder="选填"
                maxlength="32"
                class="col-1 txt-align-r"
                v-model="findList.accountnum"
              />
            </li>
            <li>
              <label for="bank">开户行</label>
              <input
                id="bank"
                type="text"
                placeholder="选填"
                maxlength="100"
                class="col-1 txt-align-r"
                v-model="findList.bank"
              />
            </li>
          </ul>
          <div class="back-grey padding-all">
            <p>请至少填写一种电子发票接收方式，短信接收号码设置后将无法更改</p>
          </div>
          <ul>
            <li>
              <label for="email">电子发票接收邮箱</label>
              <input
                ref="mail"
                id="email"
                type="text"
                placeholder="请输入邮箱地址"
                class="col-1 txt-align-r"
                v-model="findList.mail"
                @blur="trimValue('mail')"
              />
            </li>
          </ul>
          <div class="back-grey padding-all">
            <p>
              电子票将于
              <span class="txt-red">t+1</span>
              发送至您的手机/电子邮箱，请注意查收，并及时下载
            </p>
          </div>
        </div>
        <!-- 将固定定位的按钮改为普通流布局 -->
        <div class="btn-container" style="margin-top: 10vw; margin-bottom: 15vw; display: flex; justify-content: center">
          <button
            :class="{
              'mint-button': true,
              'mint-button--danger': classobj.danger,
              'mint-button--default': classobj.default,
              'mint-button--large': true,
              'is-plain': true
            }"
            @click="ljkp()"
          >
            <label class="mint-button-text">立即开票</label>
          </button>
        </div>
      </div>
    </div>
    <div class="loading-mask" v-if="loading">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <p class="loading-text">{{ loadingText }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HomeView",
  data() {
    return {
      token: "",
      kaipiao: "企业",
      tianxie: "填写非必填项 ∨",
      flag: 0,
      geren: true,
      fapiaoNo: [],
      feibitian: false,
      kaipiaoMy: 0,
      classobj: {
        danger: false,
        default: true
      },
      loading: false,
      loadingText: "请求处理中...",
      fapiaotype: "0",
      findList: {
        accountnum: "",
        address: "",
        bank: "",
        mail: "",
        custName: "",
        BuyPhone: "",
        socialCode: "",
        telephone: "",
        custType: "",
        orderAmt: "",
        orderDate: "",
        orderNo: "",
        orderTime: "",
        OrgId: "",
        remark: "",
        txId: "",
        txNo: "",
        invoicetype: "0",
        billType: "0",
        orderGoods: [{
          goodsNum: "",
          goodsSpec: "",
          goodsAmt: "",
          goodsNo: "",
          goodsNm: ""
        }]
      }
    };
  },
  watch: {
    kaipiao(val) {
      this.canSubmit();
      this.geren = val === "企业";
      if (val === "个人") {
        this.fapiaotype = "0";
      }
    },
    'findList.custName': { handler: 'canSubmit' },
    'findList.socialCode': { handler: 'canSubmit' },
    'findList.mail': { handler: 'canSubmit' },
    'findList.BuyPhone': { handler: 'canSubmit' },
    fapiaotype(val) {
      this.findList.billType = val;
    }
  },
  methods: {
    jian(index) {
      if (this.fapiaoNo[index] > 0) {
        this.fapiaoNo[index]--;
        this.updateKaipiaoMy();
      } else {
        this.showWarning("不能再减了");
      }
    },
    jia(index) {
      if (this.fapiaoNo[index] < this.findList.orderGoods[index].unUseNum) {
        this.fapiaoNo[index]++;
        this.updateKaipiaoMy();
      } else {
        this.showWarning("不能再加了");
      }
    },
    updateKaipiaoMy() {
      this.kaipiaoMy = this.fapiaoNo.reduce((total, num, index) => {
        const goodsAmt = this.findList.orderGoods[index]?.goodsAmt || 0;
        return total + (num * goodsAmt);
      }, 0);
    },
    canSubmit() {
      const hasContact = this.findList.mail || this.findList.BuyPhone;
      const isEnterprise = this.kaipiao === "企业";
      const isValid = isEnterprise
        ? hasContact && this.findList.custName && this.findList.socialCode
        : hasContact && this.findList.custName;
      this.updateButtonStyle(isValid);
      return isValid;
    },
    updateButtonStyle(isValid) {
      this.classobj.default = !isValid;
      this.classobj.danger = isValid;
    },
    showF() {
      this.flag = this.flag === 0 ? 1 : 0;
      this.tianxie = this.flag === 1 ? "填写非必填项 ∧" : "填写非必填项 ∨";
      this.feibitian = this.flag === 1;
    },
    res() {
      this.findList.socialCode = '';
    },
    async ljkp() {
      try {
        // 表单验证
        if (!this.validateForm()) {
          return;
        }

        this.loading = true;
        this.loadingText = "开票处理中...";
        
        // 准备提交数据
        const submitData = this.prepareSubmitData();
        
        // 打印提交数据，方便调试
        console.log('准备提交的数据:', submitData);
        
        // 发送请求
        const res = await this.submitInvoice(submitData);
        
        // 处理响应
        this.handleInvoiceResponse(res);
      } catch (error) {
        this.handleInvoiceError(error);
      } finally {
        this.loading = false;
      }
    },

    // 表单验证
    validateForm() {
      // 验证发票类型
      if (!this.fapiaotype) {
        this.showError('请选择发票类型');
        return false;
      }

      // 验证开票类型
      if (!this.kaipiao) {
        this.showError('请选择开票类型');
        return false;
      }

      // 验证开票数量
      if (!this.fapiaoNo.some(num => num > 0)) {
        this.showError('请选择开票数量');
        return false;
      }

      // 验证开票抬头
      if (!this.findList.custName) {
        this.showError('请输入开票抬头');
        return false;
      }

      // 企业时验证纳税人识别号
      if (this.kaipiao === '企业' && !this.findList.socialCode) {
        this.showError('请输入纳税人识别号');
        return false;
      }

      return true;
    },

    // 准备提交数据
    prepareSubmitData() {
      // 打印当前状态，方便调试
      console.log('当前状态:', {
        fapiaotype: this.fapiaotype,
        kaipiao: this.kaipiao,
        findList: this.findList
      });

      const submitData = {
        chName: this.findList.chName || '',           // 渠道名称 Max200Char
        socialCode: this.findList.socialCode || '',    // 客户社会统一信用代码 Max64Char
        custName: this.findList.custName || '',       // 客户名称 Max200Char
        custType: this.kaipiao === '企业' ? '01' : '00', // 客户类型 Max10Char
        address: this.findList.address || '',         // 地址 Max200Char
        telephone: this.findList.telephone || '',     // 电话 Max64Char
        bank: this.findList.bank || '',              // 开户行名称 Max200Char
        accountnum: this.findList.accountnum || '',   // 账号 Max64Char
        mail: this.findList.mail || '',              // 收票邮箱 Max200Char
        openType: this.findList.openType || '',      // 开票类型 Max10Char
        billType: "0", // 强制设置为普票
        txId: this.findList.txId || '',              // 交易ID Max20Char
        orderNo: this.findList.orderNo || '',        // 订单编号 Max20Char
        txNo: this.findList.txNo || '',              // 业务流水号 Max20Char
        orderGoods: this.prepareGoodsList(),         // 商品信息
        remark: this.findList.remark || '',          // 备注 Max200Char
        def1: this.findList.def1 || ''               // 账户号 Max200Char
      };

      // 打印提交数据，方便调试
      console.log('提交数据:', submitData);

      return submitData;
    },

    // 处理开票响应
    handleInvoiceResponse(res) {
      if (res.data.data.returnCode === '90000') {
        this.showSuccess(res.data.data.returnMsg || '开票申请成功');
        // 移除页面跳转，改为刷新当前页面
        setTimeout(() => {
          this.getList(); // 重新获取列表数据
        }, 1500); // 等待1.5秒后刷新，让用户能看到成功提示
      } else {
        throw new Error(res.data.data.returnMsg || '开票申请失败');
      }
    },

    // 错误处理
    handleInvoiceError(error) {
      console.error('开票失败:', error);
      this.showError(error.message || '开票申请失败，请稍后重试');
    },

    // 准备商品列表数据
    prepareGoodsList() {
      return this.fapiaoNo.reduce((acc, count, index) => {
        if (count > 0) {
          const item = {
            goodsNo: this.findList.orderGoods[index].goodsNo || '',     // 商品编号 Max10Char
            goodsNm: this.findList.orderGoods[index].goodsNm || '',     // 商品名称 Max120Char
            goodsSpec: this.findList.orderGoods[index].goodsSpec || '', // 商品规格 Max10Char
            goodsAmt: this.findList.orderGoods[index].goodsAmt || 0,    // 商品单价 DecimalNumber(16)
            goodsNum: count,                                            // 开票数量 Integer(10)
            openAmt: (this.findList.orderGoods[index].goodsAmt * count).toFixed(2) // 开票金额 DecimalNumber(20)
          };
          acc.push(item);
        }
        return acc;
      }, []);
    },

    // 显示成功提示
    showSuccess(message) {
      this.$message({
        message,
        type: 'success',
        duration: 1500 // 设置提示显示时间为1.5秒
      });
    },

    // 显示错误提示
    showError(message) {
      this.$message({
        message,
        type: 'error',
        offset: 150,
        duration: 5000
      });
    },
    historyList() {
      this.$router.push({ path: "/HistoryListView" });
    },
    async getList() {
      try {
        this.loading = true;
        this.loadingText = "数据加载中...";
        
        // 获取token并打印调试信息
        const token = this.getToken();
        console.log('getList方法中的token值:', token);
        
        if (!token) {
          // 提供更详细的错误信息和解决建议
          const errorMsg = 'Token未找到，请检查以下几点：\n1. 确认URL中包含token参数\n2. 检查浏览器是否支持Cookie\n3. 尝试重新获取访问链接';
          console.error('Token验证失败:', {
            urlToken: this.$route.query.token,
            cookieToken: token,
            currentUrl: window.location.href
          });
          
          this.$message({
            message: errorMsg,
            type: "error",
            duration: 5000,
            showClose: true
          });
          
          // 尝试从URL重新获取token
          if (this.$route.query.token) {
            console.log('尝试重新设置token...');
            this.setToken(this.$route.query.token);
            const retryToken = this.getToken();
            if (retryToken) {
              console.log('Token重新设置成功，继续执行请求');
            } else {
              throw new Error('Token设置失败，可能是Cookie被禁用');
            }
          } else {
            throw new Error('URL中缺少token参数，请使用正确的访问链接');
          }
        }
        
        // 使用统一的API客户端
        const res = await this.$apiClient({
          method: "get",
          url: "/invoice/queryMetalElecUninvoicedData"
        });
        
        console.log('API请求成功，响应:', res.data);
        
        if (res.data?.data) {
          this.initializeData(res.data.data);
        } else {
          console.warn('API响应数据格式异常:', res.data);
          this.$message({
            message: "数据格式异常，请联系技术支持",
            type: "warning"
          });
        }
      } catch (error) {
        console.error('getList请求失败:', error);
        this.handleError(error);
      } finally {
        this.loading = false;
      }
    },
    initializeData(data) {
      if (data.orderGoods && Array.isArray(data.orderGoods)) {
        if (data.orderDate && data.orderTime) {
          const date = data.orderDate.toString();
          const time = data.orderTime.toString();
          data.orderDate = `${date.substring(0, 4)}-${date.substring(4, 6)}-${date.substring(6, 8)}`;
          data.orderTime = `${time.substring(0, 2)}:${time.substring(2, 4)}:${time.substring(4, 6)}`;
        }
        this.fapiaoNo = new Array(data.orderGoods.length).fill(0);
        this.findList = JSON.parse(JSON.stringify(data));
        this.findList.custType = this.kaipiao === "个人" ? "00" : "01";
        this.findList.accountnum = this.findList.accountnum || "";
        this.findList.bank = this.findList.bank || "";
        this.updateKaipiaoMy();
      } else {
        console.error('orderGoods 数据格式错误:', data);
      }
    },
    checkTaxId(taxId) {
      const regArr = [
        /^[\da-z]{10,15}$/i,
        /^\d{6}[\da-z]{10,12}$/i,
        /^[a-z]\d{6}[\da-z]{9,11}$/i,
        /^[a-z]{2}\d{6}[\da-z]{8,10}$/i,
        /^\d{14}[\dx][\da-z]{4,5}$/i,
        /^\d{17}[\dx][\da-z]{1,2}$/i,
        /^[a-z]\d{14}[\dx][\da-z]{3,4}$/i,
        /^[a-z]\d{17}[\dx][\da-z]{0,1}$/i,
        /^[\d]{6}[\da-z]{13,14}$/i
      ];
      return regArr.some(reg => reg.test(taxId));
    },
    checkPhone(phone) {
      return !/^1[3456789]\d{9}$/.test(phone);
    },
    checkEmail(email) {
      return !/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(email);
    },
    // 提交开票请求
    async submitInvoice(submitData) {
      try {
        const res = await this.$apiClient({
          method: "post",
          url: "/invoice/writeMetalElecReceipt",
          data: submitData
        });
        return res;
      } catch (error) {
        console.error('提交开票请求失败:', error);
        throw new Error(error.response?.data?.msg || '网络请求失败');
      }
    },
    trimValue(field) {
      if (this.findList[field]) {
        this.findList[field] = this.findList[field].trim();
      }
    },
    trimSocialCode() {
      if (this.findList.socialCode) {
        this.findList.socialCode = this.findList.socialCode.replace(/\s+/g, '');
      }
    },
    // 错误处理方法
    handleError(error) {
      console.error('操作失败:', error);
      let errorMessage = '操作失败';
      
      if (error.response) {
        // 服务器响应错误
        errorMessage = error.response.data?.msg || error.response.data?.message || `服务器错误 (${error.response.status})`;
      } else if (error.request) {
        // 网络请求错误
        errorMessage = '网络连接失败，请检查网络设置';
      } else if (error.message) {
        // 其他错误
        errorMessage = error.message;
      }
      
      this.$message({
        message: errorMessage,
        type: "error"
      });
    }
  },
  mounted() {
    // 详细的token调试信息
    console.log('=== Token调试信息 ===');
    console.log('URL参数token:', this.$route.query.token);
    console.log('当前路由:', this.$route);
    console.log('URL完整地址:', window.location.href);
    
    // 设置token
    if (this.$route.query.token) {
      this.setToken(this.$route.query.token);
      console.log('Token已设置到Cookie');
    } else {
      console.warn('URL中未找到token参数');
    }
    
    // 验证token是否成功存储
    const storedToken = this.getToken();
    console.log('从Cookie获取的token:', storedToken);
    console.log('Token长度:', storedToken ? storedToken.length : 0);
    
    this.findList.invoicetype = "0";
    this.findList.billType = "0";
    
    setTimeout(() => {
      this.getList();
    }, 100);
  }
};
</script>

<style scoped>
  a, abbr, audio, b, body, button, canvas, dd, div, dl, dt, em, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, input, label, li, mark, menu, nav, ol, option, p, ruby, s, section, select, span, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, video {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font: inherit;
    font-family: \\65B9\6B63\5170\4EAD\9ED1\7B80\4F53,PingFang,Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif;
  }
  .content {
    overflow-y: auto;
    width: 96%;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    height: auto; /* 修改为自适应高度 */
    min-height: 100vh; /* 确保至少有一屏高度 */
    font-size: 4.2vw;
    color: #333;
    margin: 0 auto;
    padding-bottom: 30vw; /* 增加底部padding，为按钮留出足够空间 */
  }
  .mainBack {
    background: #fff;
  }
  .margin-t {
    margin-top: 4vw;
  }
  .padding-t {
    padding-top: 2vw;
  }
  .mainBack ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .info-list ul li {
    padding: 3.5vw 0;
    margin: 0vw 1vw;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    display: -webkit-box;
    overflow: hidden;
  }
  .info-list ul li label {
    display: block;
    min-width: 2vw;
  }
  .txt-align-r {
    text-align: right;
  }
  .col-1 {
    -webkit-box-flex: 1;
  }
  .mtmine-radio {
    overflow: hidden;
  }
  .flex-justify-align {
    display: -webkit-box;
    -webkit-box-pack: justify;
  }
  .flex-justify-align {
    -webkit-box-align: center;
  }
  .flex-end {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: end;
  }
  .txt-red {
    color: #c9161e;
  }
  .txt-weight {
    font-weight: 700;
    margin-bottom: 2vw;
  }
  .invoice-total {
    padding: 0 5vw 2vw;
  }
  .txt-h3, h3, h4 {
    font-size: 4.2vw;
  }
  .invoice-type .mtmine-radio .mint-cell {
    margin-right: 0;
    min-height: 10.5vw;
    padding-left: 1.3vw;
  }
  .mint-cell-left {
    position: absolute;
    height: 100%;
    left: 0;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
  }
  .mtmine-radio .mint-radio-core {
    width: .4vw;
    height: .4vw;
  }
  .mtmine-radio .mint-radio-input:checked+.mint-radio-core {
    background-color: #c9161e;
    border-color: #c9161e;
  }
  .mtmine-radio .mint-radio-label {
    margin-left: 0;
    font-size: 1.58vw;
  }
  .info-list ul li input[type=text] {
    display: block;
    -webkit-box-flex: 1;
    font-size: 4vw;
  }
  .info-list ul li input {
    border: none;
    margin-left: 2vw;
    margin-right: 2vw;
  }
  .padding-all {
    padding: 4vw 2vw;
  }
  .kaipiao {
    width: 4.0vw;
    height: 4.0vw;
  }
  .back-grey {
    background: #f8f8f8;
    text-align: left;
  }
  .mint-button.mint-button--large {
    line-height: 2.9vw;
    font-size: 4.5vw;
    width: 90%;
    height: 10vw;
    margin-left: 1%;
    margin-top: 5%;
    margin-bottom: 2%;
    color: #fff;
    background-color: #ccc;
    border-radius: 5.5vw;
  }
  .mint-button--danger.is-plain {
    border: 1px solid #c9161e;
    color: #c9161e;
    background-color: #fff;
  }
  .mint-button--default {
    color: #fff;
    background-color: #ccc;
  }
  .invoice-item {
    margin: 0 5vw 5vw;
    border: 1px solid #e8e8e8;
    padding: 2vw;
    border-radius: 3vw;
  }
  .invoice-item-bot {
    margin: 0 2vw 2vw;
  }
  .invoice-item:last-child {
    margin-bottom: 0;
  }
  .invoice-count {
    width: 2vw;
    border: 1px solid #e8e8e8;
  }
  .card-span {
    border: 1px solid #e8e8e8;
  }
  .line {
    width: 90%;
    height: 1px;
    margin-left: 5%;
    margin-top: 5vw;
    margin-bottom: 5vw;
    background: #e8e8e8;
  }
  .product {
    width: 96%;
    margin-left: 2%;
    justify-content: space-between;
    display: flex;
  }
  input, select, textarea {
    outline: 0;
  }
  .txt-highlight {
    color: #ff9116;
    text-align: left;
  }
  .invoice-sign {
    padding: 1px .1rem;
    border-radius: .1rem;
    background: rgba(255,145,22,.1);
  }
  .txt-align-r {
    text-align: right;
  }
  .col-30 {
    width: 30%;
  }
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .loading-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 120px;
  }
  .loading-spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #c9161e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  .loading-text {
    color: #333;
    font-size: 14px;
    margin: 0;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .kaipiao:disabled + label {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .disabled-text {
    color: #999 !important;
  }
  .btn-margin {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 3vw 0;
    z-index: 10;
  }
</style>
